<template>
  <div>
    <div class="introduce">
      <div class="title">
        论文云审核接口
      </div>
      <div class="content">
        论文云审核接口基于先进的自然语言处理（NLP）和机器学习技术，能够深度分析和理解论文文本。通过建立复杂的模型和算法，该接口能够检测论文中的语法错误、语义错误、主题方向以及学术规范遵循等问题。
      </div>
    </div>
    <div class="test" ref="test">
      <div class="_input">
        <div class="upload_pdf">
          <div class="pdf_side">
            <ul class="pdf_list_ul" ref="pdfList">
              <li v-for="(page, index) in pdfPages" :key="index" class="pdf_list_li">
                <div class="pdf_list_li_img" :class="{ selected: selectImgIndex === index }" @click="change_img(index)">
                  <img :src="page" alt="PDF page" draggable="false"/>
                </div>
              </li>
            </ul>
            <div class="pdf_btn">
              <input style="width: 100%;" type="file" @change="handleFileChange"/>
            </div>
          </div>
          <div class="pdf_main" ref="pdfMain">
            <div class="pdf_main1" ref="pdfMain1" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="drag"
                 @wheel="zoom">
              <div ref="pdf_img" class="pdf_img">
                <!-- box组件 -->
                <div :ref="(el) =>changeImgBox(el,item)" class="img_box"
                     v-for="(item,index) in pdfOcrSeat"
                     :key="index" @dblclick="boxDbclick(index)"></div>
                <img :src="pdfPages[selectImgIndex]" alt="暂无数据" draggable="false"/>
              </div>
            </div>
            <div class="pdf_pages">
              {{ (selectImgIndex + 1) + '/' + pdfPages.length }}
            </div>
            <div class="pdf_main_zoom">
              <div class="pdf_main_zoom_big" @click="change_zoom(1)">
                <el-icon :size="20">
                  <ZoomIn/>
                </el-icon>
              </div>
              <div class="pdf_main_zoom_min" @click="change_zoom(-1)">
                <el-icon :size="20">
                  <ZoomOut/>
                </el-icon>
              </div>
              <div class="pdf_main_zoom_reset" @click="reset">
                <el-icon :size="20">
                  <Refresh/>
                </el-icon>
              </div>
              <div class="pdf_main_zoom_scan">
                <el-icon :size="20" v-if="pdfOcrSeat.length===0" @click="scan"
                         :class="{ 'disabled-icon': pdfOcrDatas===[]||pdfOcrDatas[selectImgIndex]===undefined}">
                  <DataAnalysis/>
                </el-icon>
                <el-icon :size="20" v-else @click="scan"
                         :class="{ 'disabled-icon':  pdfOcrDatas===[]||pdfOcrDatas[selectImgIndex]===undefined}">
                  <DataBoard/>
                </el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="param">
          <div class="param_title">参数设置</div>
          <div class="param_option">
            <div class="param_option_for" v-for="index in computedLoopCount" :key="index">
              <el-checkbox v-model="checked.checkedState[index-1]" :label="checked.checkedLabel[index-1]"
                           @change="checkedChange(index-1)" :disabled="commitBtnState===2||commitBtnState===3"/>
            </div>
          </div>
          <el-button @click="commit" :disabled="commitBtnState!==1">{{ commitBtnLabel[commitBtnState] }}</el-button>
        </div>
      </div>
      <div class="_output">
        <OnlineTestOutPutView/>
      </div>
    </div>
  </div>
</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";
// 注意导入的写法
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js'
window.pdfjsWorker = require('pdfjs-dist/build/pdf.worker')
import {ZoomIn, ZoomOut, Refresh, DataAnalysis, DataBoard} from "@element-plus/icons-vue";
import request from "@/util/request";
import 'vue-json-pretty/lib/styles.css';
import {url} from "@/util/url";
import {splitPDFToSinglePagesAsFiles} from "@/util/pdfSplitter";
import OnlineTestOutPutView from "@/paper_review/view/console/main/OnlineTestOutPutView";
import {bus} from "@/paper_review/js/bus";
import Fuse from 'fuse.js'
export default {
  name: "OnlineTestView",
  data() {
    return {
      pdfPages: [],
      checked: {
        checkedState: [true, true, true, true],
        checkedLabel: ["论文结构分析", "语法错误检测", "文本错误检测", "自定义主题"],
        checkedValue: ['', '', '', '智慧养老服务'],
      },
      selectImgIndex: 0,
      dragging: false,
      initialX: 0,
      initialY: 0,
      offsetX: 0,
      offsetY: 0,
      scale: 1,
      pdfFiles: null,
      pdfOcrDatas: [],
      textContent: [],
      pdfOcrSeat: [],
      commitBtnState: 0,
      commitBtnLabel: ["请选择参数", "提交", "等待审核中", "审核完成，需要继续审核请选择新文件"],
    }
  },
  components: {
    OnlineTestOutPutView,
    ZoomIn, ZoomOut, Refresh, DataAnalysis, DataBoard
  },
  computed: {
    computedLoopCount() {
      // 这里可以指定循环的次数
      return 4;
    }
  },
  mounted() {
    bus.on("锁定文字位置", this.lockThePositionFrame);
    this.setupScrolling();
    this.loadPdfFile();
  },
  methods: {
    blobToFile(blob) {
      return new File([blob], 'test.pdf', {type: 'application/pdf'})
    },
    async loadPdfFile() {
      bus.emit('sendChecked', this.checked);
      request.get('http://www.zxy-cloud.asia:999/file/test.pdf', {
        responseType: 'blob',
      }).then(async res => {
        // 将Blob转换为File对象
        const file = this.blobToFile(res);
        try {
          const singlePagePDFs = await splitPDFToSinglePagesAsFiles(file);
          // 在这里处理单页PDF文件对象数组，例如下载或显示等操作
          console.log(singlePagePDFs);
          this.pdfFiles = singlePagePDFs;
          this.pdfOcrDatas = new Array(this.pdfFiles.length);
          this.textContent = new Array(this.pdfFiles.length);
          console.log('开始ocr')
          // this.toOcr(3, '/ocr');
          // this.toOcr(3, '/default_ocr');
          for (let i = 0; i < this.pdfOcrDatas.length; i++) {
            this.toOcr(i, '/default_ocr');
            // this.toOcr(i, '/ocr');
          }
          //审核结束按钮状态
          this.commitBtnState = 3;
        } catch (error) {
          console.error('Error splitting PDF:', error);
        }
        // 现在你可以使用file对象进行进一步的操作
        await this.convertPdfToImages(file);
        // this.pdfPages = await this.convertPdfToImages(file);
      }).catch(err => {
        console.log(err);
      });
    },
    //滚轮滑动
    setupScrolling() {
      const pdfList = this.$refs.pdfList;
      pdfList.addEventListener('wheel', (event) => {
        // 根据滚轮事件调整滚动位置
        pdfList.scrollTop += event.deltaY * 0.5;
      });
    },
    change_img(i) {
      this.selectImgIndex = i;
      this.reset();
    },
    changeImgBox(el, item) {
      if (el === null) return
      let w = 0.0817;
      let h = 0.0622;
      el.style.left = (item[0][0][0]) * w + '%';
      el.style.top = (item[0][0][1]) * h + '%';
      el.style.width = (item[0][1][0] - item[0][0][0] + 1) * w + '%';
      el.style.height = (item[0][2][1] - item[0][1][1] + 1) * h + '%';
    },
    lockThePositionFrame(text) {
      console.log("文本：", text);
      let textsObject = [];
      for (let page = 0; page < this.pdfOcrDatas.length; page++) {
        for (let box = 0; box < this.pdfOcrDatas[page].length; box++) {
          textsObject.push({name: this.pdfOcrDatas[page][box][1][0]})
        }
      }
      let fuse = new Fuse(textsObject, {
        keys: ['name'], // 现在我们使用'name'键来搜索我们的数据
        includeScore: true, // 是否包含匹配分数在结果中
        threshold: 0.4, // 匹配得分的阈值，得分低于这个值的将不会被包含在结果中
        scoreFn: (match) => {
          // 获取默认的模糊匹配得分
          const defaultScore = Fuse.createSearchIndex(match.item)[match.key].score(match.text);
          // match.text 是搜索的文本，match.item 是匹配的项
          // 这里我们假设 match.item.name 是需要评分的字符串
          const textLength = match.item.name.length;
          // 自定义评分逻辑，这里简单地使用字符串长度的倒数作为评分
          // 你可以根据需要调整这个逻辑
          const lengthScore = 1 / (Math.abs(text.length - textLength) + 1); // 长度越相近的字符串，score 越接近 1
          // 结合两种得分，可以根据需要调整权重
          return (defaultScore * 0.7) + (lengthScore * 0.3);
        }
      });
      let searchResults = fuse.search(text).map((result) => ({
        item: result.item.name, // 从搜索结果中提取原始字符串
        score: result.score, // 匹配得分，越低表示匹配度越高
      }));
      console.log("文本匹配结果:", searchResults);
      let selectName = searchResults.reduce((accumulator, currentItem) => {
        // 如果累加器（即之前的最高分项）是undefined（数组为空或第一次迭代），或者当前项的得分高于累加器中的得分，则更新累加器
        if (!accumulator || currentItem.score > accumulator.score) {
          return currentItem;
        }
        // 否则，返回当前的累加器（即之前的最高分项）
        return accumulator;
      }).item;
      for (let page = 0; page < this.pdfOcrDatas.length; page++) {
        for (let box = 0; box < this.pdfOcrDatas[page].length; box++) {
          if (selectName === this.pdfOcrDatas[page][box][1][0]) {
            console.log("找到文本对应坐标", this.pdfOcrDatas[page][box][0]);
            this.selectImgIndex = page;
            this.reset();
            this.pdfOcrSeat.push(this.pdfOcrDatas[page][box])
            return;
          }
        }
      }
    },
    async boxDbclick(index) {
      try {
        console.log("box双击:", this.pdfOcrDatas[this.selectImgIndex][index]);
        // 获取你想要复制的文本
        const textToCopy = this.pdfOcrDatas[this.selectImgIndex][index][1][0];
        // 将文本复制到剪贴板
        await navigator.clipboard.writeText(textToCopy);
        // 可选：通知用户文本已成功复制
        console.log('文本已成功复制到剪贴板');
        ElMessage({
          message: '文本已成功复制到剪贴板',
          grouping: true,
          type: 'success',
        });
        // 或者你也可以显示一个通知或更改UI来告知用户
      } catch (err) {
        // 处理复制失败的情况
        console.error('无法复制文本到剪贴板', err);
        // 可选：通知用户复制失败
      }
    },
    toOcr(i, path = '/ocr') {
      // 创建一个 FormData 对象
      let formData = new FormData();
      if (path === '/default_ocr') {
        console.log('添加参数pages', i);
        formData.append('pages', i); // 添加 pages 参数到 formData 中
      } else {
        // 将文件添加到 FormData 对象中
        formData.append('file', this.pdfFiles[i]);
        formData.append('pages', i); // 添加 pages 参数到 formData 中
      }
      fetch(url + path, {
        method: 'POST',
        body: formData
      }).then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json(); // 将响应解析为 JSON 数据
      }).then(data => {
        this.pdfOcrDatas[i] = data.data[0];
        this.textContent[i] = data.text;
        console.log('完成第' + (i + 1) + '页ocr');
        bus.emit('论文文本提取进度', 1 / this.pdfOcrDatas.length);
        console.log('当前论文文本提取结果', this.pdfOcrDatas);
        for (let j = 0; j < this.pdfOcrDatas.length; j++) {
          if (this.pdfOcrDatas[j] === undefined) return;
        }
        bus.emit('论文文本提取进度', -1);
        if (path === '/default_ocr') {
          bus.emit('开始进行其他参数操作(初始化)', this.textContent);
        } else
          bus.emit('开始进行其他参数操作', this.textContent);
        console.log('全部页面ocr完成');
        // console.log(this.textContent);
        // [页面][box][seat,text][4个坐标][x,y]
        //                      [文本，可信度]
        // console.log(this.textContent);
        // this.saveTxt(this.textContent);
        // this.$emit('unLoading', '这是子组件传递给父组件的数据');
      }).catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
      });
    },
    saveTxt(textContent) {
      // 创建一个新的Blob对象
      const blob = new Blob([textContent], {type: 'text/plain'});
      // 创建一个URL对象
      const url = URL.createObjectURL(blob);
      // 创建一个新的a标签
      const a = document.createElement('a');
      a.href = url;
      a.download = 'text_content.txt'; // 下载文件的文件名
      // 将a标签添加到文档中并触发点击事件来下载文件
      document.body.appendChild(a);
      a.click();
      // 释放URL对象
      URL.revokeObjectURL(url);
    },
    async handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        //重置参数
        this.resetParamValue();
        try {
          const singlePagePDFs = await splitPDFToSinglePagesAsFiles(file);
          // 在这里处理单页PDF文件对象数组，例如下载或显示等操作
          console.log(singlePagePDFs);
          this.pdfFiles = singlePagePDFs;
          this.pdfOcrDatas = new Array(this.pdfFiles.length);
          this.textContent = new Array(this.pdfFiles.length);
        } catch (error) {
          console.error('Error splitting PDF:', error);
        }
        await this.convertPdfToImages(file);
        // this.pdfPages = await this.convertPdfToImages(file);
        console.log(file)
      }
    },
    resetParamValue() {
      this.pdfPages = [];
      this.checked.checkedState = [false, false, false, false];
      this.checked.checkedValue = ['', '', '', ''];
      this.selectImgIndex = 0;
      this.dragging = false;
      this.initialX = 0;
      this.initialY = 0;
      this.offsetX = 0;
      this.offsetY = 0;
      this.scale = 1;
      this.pdfFiles = null;
      this.pdfOcrDatas = [];
      this.textContent = [];
      this.pdfOcrSeat = [];
      this.commitBtnState = 0;
      bus.emit('清空参数');
    },
    async convertPdfToImages(pdfFile) {
      const pdfData = await this.readFileAsync(pdfFile);
      const pdf = await pdfjsLib.getDocument(new Uint8Array(pdfData)).promise;
      const pages = [];
      for (let i = 1; i <= pdf.numPages; i++) {
        const page = await pdf.getPage(i);
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        // const viewport = page.getViewport({scale: 1.5});
        const viewport = page.getViewport({scale: 3});
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        await page.render({canvasContext: context, viewport}).promise;
        const imageDataURL = canvas.toDataURL('image/png');
        this.pdfPages.push(imageDataURL);
        pages.push(imageDataURL);
      }
      return pages;
    },
    readFileAsync(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          resolve(event.target.result);
        };
        reader.onerror = (error) => {
          reject(error);
        };
        reader.readAsArrayBuffer(file);
      });
    },
    startDrag(event) {
      if (event.button === 0) { // Check if it's the left mouse button
        this.dragging = true;
        this.initialX = event.clientX - this.offsetX;
        this.initialY = event.clientY - this.offsetY;
        window.addEventListener('mousemove', this.drag);
        window.addEventListener('mouseup', this.stopDrag);
      }
    },
    stopDrag() {
      this.dragging = false;
      window.removeEventListener('mousemove', this.drag);
      window.removeEventListener('mouseup', this.stopDrag);
    },
    drag(event) {
      if (this.dragging) {
        this.offsetX = event.clientX - this.initialX;
        this.offsetY = event.clientY - this.initialY;
        const minLeft = -(this.$refs.pdfMain.offsetWidth / 2 + this.scale * this.$refs.pdfMain1.offsetWidth / 2);
        const maxLeft = this.$refs.pdfMain.offsetWidth / 2 + this.scale * this.$refs.pdfMain1.offsetWidth / 2;
        const minTop = -(this.$refs.pdfMain.offsetHeight / 2 + this.scale * this.$refs.pdfMain1.offsetHeight / 2);
        const maxTop = this.$refs.pdfMain.offsetHeight / 2 + this.scale * this.$refs.pdfMain1.offsetHeight / 2;
        if (this.offsetX > minLeft && this.offsetX < maxLeft && this.offsetY > minTop && this.offsetY < maxTop)
          this.$refs.pdfMain1.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`;
        else {
          this.reset();
          this.stopDrag();
        }
      }
    },
    zoom(event) {
      const delta = event.deltaY;
      if (delta > 0) {
        this.scale *= 0.9; // 缩小
      } else {
        this.scale *= 1.1; // 放大
      }
      this.$refs.pdfMain1.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`;
    },
    change_zoom(i) {
      this.scale *= (1 + 0.1 * i);
      this.$refs.pdfMain1.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`;
    },
    reset() {
      this.dragging = false;
      this.initialX = 0;
      this.initialY = 0;
      this.offsetX = 0;
      this.offsetY = 0;
      this.scale = 1;
      this.$refs.pdfMain1.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.scale})`;
      // if (this.pdfOcrDatas[this.selectImgIndex] !== undefined)
      //   this.pdfOcrSeat = this.pdfOcrDatas[this.selectImgIndex].slice();
      this.pdfOcrSeat.splice(0, this.pdfOcrSeat.length);//清空box框
    },
    scan() {
      if (this.pdfOcrSeat.length === 0 && this.pdfOcrDatas[this.selectImgIndex] !== undefined)
        this.pdfOcrSeat = this.pdfOcrDatas[this.selectImgIndex].slice();
      else
        this.pdfOcrSeat.splice(0, this.pdfOcrSeat.length);
    },
    checkedChange(i) {
      switch (i) {
        case 0:
          break;
        case 1:
          break;
        case 2:
          break;
        case 3:
          if (this.checked.checkedState[i] === true) {
            this.checked.checkedState[i] = false;
            ElMessageBox.prompt('请用一段话解释您的主题', '自定义主题', {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              inputPattern: /.{5,}/,
              inputErrorMessage: '请输入至少大于5个字',
            }).then(({value}) => {
              this.checked.checkedValue[i] = value;
              this.checked.checkedState[i] = true;
              ElMessage({
                type: 'success',
                message: `已设置自定义主题参数`,
              })
            }).catch(() => {
              ElMessage({
                type: 'info',
                message: '取消',
              })
            })
          }
          break;
      }
      console.log(this.checked.checkedState);
      for (let j = 0; j < this.checked.checkedState.length; j++) {
        if (this.checked.checkedState[j]) {
          this.commitBtnState = 1;
          return;
        }
      }
      this.commitBtnState = 0;
    },
    commit() {
      bus.emit('清空参数');
      this.commitBtnState = 2;
      bus.emit('sendChecked', this.checked);
      console.log('开始ocr')
      for (let i = 0; i < this.pdfOcrDatas.length; i++) {
        this.toOcr(i);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.introduce {
  padding: 1vh 1vw 1vh 1vw;

  .title {
    font-weight: bolder;
    font-size: 3vh;
    padding: 1vh 0 1vh 0;
  }

  .content {
    width: 60vw;
    font-size: 2vh;
    color: #858c99;
  }
}

.test {
  margin: 1vh 1vw 1vh 1vw;
  height: 67vh;
  background-color: white;
  display: flex;
  padding: 2vh 2vh 2vh 2vh;

  ._input {
    flex: 1;
    display: flex;
    background-color: #f2f5fa;
    padding: 2vh 2vh 2vh 2vh;
    flex-direction: column;

    .upload_pdf {
      flex: 8;
      display: flex;

      .pdf_side {
        flex: 2;

        .pdf_list_ul {
          flex: 9;
          max-height: 42vh; /* 设置最大高度为父容器高度的90% */
          margin: 0; /* 清除ul的默认边距 */
          padding: 0; /* 清除ul的默认内边距 */
          list-style: none; /* 移除列表项的默认样式 */
          //overflow: hidden;
          overflow: auto;

          /* Firefox */
          scrollbar-width: thin;
          scrollbar-color: transparent transparent;

          /* WebKit (Chrome, Safari) */
          &::-webkit-scrollbar {
            width: 6px; /* 调整滚动条宽度 */
          }

          &::-webkit-scrollbar-thumb {
            background-color: transparent; /* 滚动条颜色 */
          }

          &::-webkit-scrollbar-track {
            background-color: transparent; /* 滚动条轨道颜色 */
          }

          /* IE */
          -ms-overflow-style: none;

          /* 鼠标悬停时显示滚动条 */
          &:hover {
            scrollbar-color: gray transparent; /* Firefox */
            &::-webkit-scrollbar-thumb {
              background-color: #dcdfe5; /* WebKit */
            }
          }

          .pdf_list_li {
            display: flex;
            background-color: #dcdfe5;
            margin: 0 0 1vh 0;
            padding: 1vh 0.6vw;
            min-height: 8vw;
            align-items: center;
            justify-content: center;

            .pdf_list_li_img {
              background-color: #e3e7e8;
              margin: 0 1vw 0 1vw;
              min-height: 8vw;
              min-width: 100%;

              img {
                display: block;
                max-width: 100%;
                min-height: 8vw;
                padding: 0.5vw 0.5vw 0.5vw 0.5vw;
              }
            }

            .pdf_list_li_img:hover {
              box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2), /* 上边框阴影 */
              0 -4px 4px -2px rgba(0, 0, 0, 0.2), /* 下边框阴影 */
              4px 0 4px -2px rgba(0, 0, 0, 0.2), /* 左边框阴影 */
              -4px 0 4px -2px rgba(0, 0, 0, 0.2); /* 右边框阴影 */
            }

            .pdf_list_li_img.selected {
              box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4), /* 上边框阴影 */
              0 -4px 4px -2px rgba(0, 0, 0, 0.4), /* 下边框阴影 */
              4px 0 4px -2px rgba(0, 0, 0, 0.4), /* 左边框阴影 */
              -4px 0 4px -2px rgba(0, 0, 0, 0.4); /* 右边框阴影 */
            }

          }
        }

        .pdf_btn {
          flex: 1;
          margin: 1vh 0; /* 清除ul的默认边距 */
          display: flex;
          width: 100%;
          align-items: center;
        }
      }

      .pdf_main {
        flex: 8;
        position: relative; /* 父组件相对定位 */
        background-color: #dcdfe5;
        margin: 0 0 0 1vw;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; /* 裁剪超出边界的内容 */
        user-select: none;

        .pdf_main1 {
          background-color: #e4e8e9;
          padding: 1vw 1vw 1vw 1vw;

          .pdf_img {
            position: relative; /* 父组件相对定位 */
            .img_box {
              position: absolute; /* 相对于父组件进行绝对定位 */
              border: 1px solid red;
            }

            .img_box:hover {
              background-color: rgba(255, 0, 0, 0.5); /* 红色半透明 */
            }

            img {
              max-height: 40vh;
              max-width: 100%;
            }
          }
        }

        .pdf_pages {
          position: absolute; /* 相对于父组件进行绝对定位 */
          top: 0.5vw; /* 距离父组件顶部的距离 */
          left: 0.5vw; /* 距离父组件左侧的距离 */
        }

        .pdf_main_zoom {
          position: absolute; /* 相对于父组件进行绝对定位 */
          bottom: 0.5vw; /* 距离父组件顶部的距离 */
          left: 0.5vw; /* 距离父组件左侧的距离 */
          height: 18vh;
          width: 2.5vw;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: #e2e8f1;
          border-radius: 3px;
          box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), /* 上边框阴影 */
          0 -2px 2px -1px rgba(0, 0, 0, 0.1), /* 下边框阴影 */
          2px 0 2px -1px rgba(0, 0, 0, 0.1), /* 左边框阴影 */
          -2px 0 2px -1px rgba(0, 0, 0, 0.1); /* 右边框阴影 */
          .pdf_main_zoom_big {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .pdf_main_zoom_min {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .pdf_main_zoom_reset {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .pdf_main_zoom_scan {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .disabled-icon {
            opacity: 0.5; /* 降低不可用图标的不透明度，使其看起来灰暗 */
            pointer-events: none; /* 禁用鼠标事件，使其不能被点击 */
          }

        }
      }
    }

    .param {
      flex: 2;
      display: flex;
      flex-direction: column;

      .param_title {
        flex: 2;
        display: flex;
        justify-content: left;
      }

      .param_option {
        flex: 8;
        display: flex;
        justify-content: center;
        .param_option_for{
          width: 100%;
          .el-checkbox {
            flex: 1;
          }
        }

      }
    }
  }

  ._output {
    flex: 1;
    padding: 0 0 0 2vh;
  }
}
</style>